<template>
  <div class="blog-detail-container">
    <!-- 文章标题 -->
    <h1>{{ blog.title }}</h1>
    <!-- 文章内容 -->
    <div class="blog-content" v-html="blog.content"></div>

    <!-- 作者信息 -->
    <div class="author-info">
      <span style="margin-right: 685px; color: lightcoral; font-weight: bold" class="author-name" @click="viewAuthor(blog.uidauthor)">作者:{{ blog.authorName }}</span>
      <!--<button @click="toggleFollow(blog.uidauthor)" class="follow-btn">-->
      <!--  {{ isFollowing ? '取关' : '关注' }}-->
      <!--</button>-->
      <!--<button @click="sendMessage(blog.uidauthor)" class="message-btn">私信</button>-->
    </div>


    <!--&lt;!&ndash; 点赞/转发 &ndash;&gt;-->
    <!--<div class="actions">-->
    <!--  <button @click="toggleLike(blog.bid)" class="like-btn">-->
    <!--    {{ isLiked ? '取消点赞' : '点赞' }} ({{ blog.countLike || 0 }})-->
    <!--  </button>-->
    <!--</div>-->

    <!-- 评论区 -->
    <div class="comments">
      <h3>评论 ({{ blog.comments.length || 0 }})</h3>
      <div v-for="comment in blog.comments" class="comment-item">
        <div class="comment-header">
          <img :src="`/api/`+comment.user.userinfo.imagepath" alt="头像" class="comment-avatar"
              >
          <span class="comment-author">{{ comment.user.userinfo.nickname }}</span>
          <!-- 如果是作者就显示作者-->
          <span v-if="comment.user.uid== this.blog.uidauthor"
                class="autho"  style="margin-right: 450px"> -作者  </span>

          <!--<button @click="deleteComment(comment.id)" class="delete-btn">删除</button>-->
        </div>


        <p class="comment-content" v-text="comment.msg"></p>
      </div>
      <form @submit.prevent="submitComment" class="comment-form">
        <textarea v-model="newComment.msg" placeholder="发表评论..." required></textarea>
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
import api from "@/api";

export default {
  name: 'BlogDetail',
  data() {
    return {
      blog: {
        //  不然要出错  ,对应着文章的评论
        comments: [] // 确保默认是空数
        //  评论实例数据
        // bid:"ad9a3441-1b9a-4b9c-909c-dbbc9c40aa24"
        // cidOriginal:null
        // id:3
        // msg:"二恶烷了"
        // uidCmmting:"208557ea-b1ff-46b5-9382-aeea67cf01be"
      },
      newComment: {msg: ""},
      isLiked: false,
      isFollowing: false,
      blogId: this.$route.params.blogId
    };
  },
  mounted() {
    this.fetchBlogDetail();
  },
  methods: {
    // 获取文章详情
    fetchBlogDetail() {
      api.get(`/api/blogDetail/${this.$route.params.blogId}`).then(res => {
        if (res && res.serverData) {
          console.log(res);
          this.blog = {...this.blog, ...res.serverData};
          this.blog.comments = this.blog.comments || [];
          // 使用第一次请求的结果作为参数发起第二次请求
          return api.get("/api/getComments", {params: {"bid": this.blog.bid}});
        } else {
          console.error('响应数据为空');
        }
        //    发出第二次请求  获取博客对应的所有的评论
      }).then(
          res => {
            this.blog.comments = res.serverData;
            // console.log(this.blog.comments[0].user.userinfo.imagepath);
            console.log("博客对应的所有的评论 ", res)
          }
      );
    },
    // 发表评论
    submitComment() {
      // console.log("是否登录", !this.$store.state.user)
      if (!this.$store.state.user) {
        this.$message.error('请登录后发表评论');
        return false;
      }


      // bid                  博客id；
      //   varchar          评论内容；
      api.post("/api/comment", {
        "bid": this.blogId,
        "msg": this.newComment.msg
      }).then(// 响应成功的数据
          res => {
            console.log(res)

            //清除评论
            this.newComment.msg = "";
            if (res.code === 200) {
              //  回响评论成功的信息
              var comment = JSON.parse(JSON.stringify(res.serverData));
              this.blog.comments.push(comment);
            }


            console.log("评论的信息=", this.blog.comments)
          }
      )

    }
  }
}
</script>

<style scoped>
.blog-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.blog-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: justify;
  max-width: 800px;
  width: 100%;
}

.comment-item {
  border: 1px solid #ddd; /* 添加边框 */
  border-radius: 4px; /* 添加圆角 */
  padding: 10px; /* 调整内边距 */
  margin-bottom: 10px; /* 添加底部间距 */
  transition: all 0.2s ease; /* 添加过渡效果 */
}

.comment-item:hover {
  border-color: #888; /* 鼠标悬停时改变边框颜色 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); /* 添加阴影效果 */
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-author {
  margin-left: 5px;
}

.autho {
  color: crimson;
}
</style>

<!--user-->
<!--:-->
<!--captcha-->
<!--:-->
<!--null-->
<!--id-->
<!--:-->
<!--8-->
<!--pwd-->
<!--:-->
<!--"fb469d7ef430b0baf0cab6c436e70375"-->
<!--uid-->
<!--:-->
<!--"208557ea-b1ff-46b5-9382-aeea67cf01be"-->
<!--uname-->
<!--:-->
<!--"test"-->
<!--userinfo-->
<!--:-->
<!--{id: 8, uid: '208557ea-b1ff-46b5-9382-aeea67cf01be', nickname: 'test', realname: null, age: null, …}-->